<style lang="less">
  #div_truck_load_abnormal_logs_dialog {
    .f-mr30 {
      margin-right: 30px;
    }
  }
</style>

<template>
  <div id="div_truck_load_abnormal_logs_dialog">
    <el-dialog :visible.sync="isShow" width="40%" title="异常记录">
      <el-row class="f-mb10">
        <el-col :span="24">
          <label class="f-mr30"> 订单编号：{{truckLoadOrderData.truckLoadNumber}}</label>异常已累计 <label
          style="color: #169bd5">{{number}}</label> 次
          <el-button
            v-if="(null==truckLoadOrderData.isExceptionSuspended||truckLoadOrderData.isExceptionSuspended===111002002)&&(![101015007, 101015006].contains(this.truckLoadOrderData.status))"
            type="primary" class="f-fr"
            @click="abnormalUpClick">异常挂起
          </el-button>
          <label class="f-fr" v-if="truckLoadOrderData.isExceptionSuspended===111002001"
                 style="color: red">[订单已异常挂起]</label>
        </el-col>
      </el-row>
      <el-row v-for="(item, index) in truckLoadOrderExceptionReportList" class="f-mb10" :key="index">
        <el-col :span="24" class="f-mb5">
          {{index + 1}}、反馈人：{{item.feedbackUserName}}({{item.feedbackRoleName}})
          <label class="f-fr">反馈时间：{{item.createdDate}}</label>
        </el-col>
        <div style="background-color: #eef7ff;height: 100px">
          <el-col :span="24" class="f-mb5">
            异常类型：{{item.exceptionTypeName}}
          </el-col>
          <el-col :span="24">
            异常描述：{{item.exceptionDescription}}
          </el-col>
          <el-col :span="24" style="margin-top: 15px;background-color: #eef7ff;">
            <img class="f-ml10" v-if="item.imgPaths!==null&&item.imgPaths!==''&&item.imgPaths!==undefined"
                 v-for="(image,index) in item.imgPaths.split(',')" @click="showImageClick(image)" width="20%" :key="index"
                 v-bind:src="image"/>
          </el-col>
        </div>
      </el-row>
      <el-dialog :visible.sync="isShowImage" :modal="false">
        <img class="f-ml10" width="100%" v-bind:src="imageUrl"/>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { getTruckLoadOrderExceptionReports } from '../../api/truck-load/TruckLoadOrderExceptionReport.js';
import { modifyIsExceptionSuspended, getTruckLoadOrder } from '../../api/truck-load/TruckLoadOrder.js';

export default {
  name: 'TruckLoadAbnormalLogsDialog',
  props: {
    selectAbnormalLogsBytruckLoadOrderId: {
      type: String,
      required: Boolean
    }
  },
  watch: {
    selectAbnormalLogsBytruckLoadOrderId (val) {
      let model = JSON.parse(val);
      getTruckLoadOrder(model.id).then((res) => {
        if (res.status === 200) {
          this.truckLoadOrderData = res.data;
          console.log(res.data);
        }
      });
      this.isShow = model.isShow;
      this.getTruckLoadOrderExceptionReports('EQ_truckLoadOrder.id=' + model.id);
    }
  },
  data () {
    return {
      isShow: false,
      isShowImage: false,
      truckLoadOrderId: null,
      imageUrl: null,
      truckLoadOrderData: {},
      number: null,
      truckLoadOrderExceptionReportList: []
    };
  },
  methods: {
    showImageClick (val) {
      this.isShowImage = true;
      this.imageUrl = val;
    },
    getTruckLoadOrderExceptionReports (filters) {
      getTruckLoadOrderExceptionReports({
        filters: filters,
        sorts: 'createdDate,desc'
      }).then((res) => {
        this.truckLoadOrderExceptionReportList = res.data;
        this.number = res.data.length;
      });
    },
    abnormalUpClick () {
      this.$prompt('已核实订单异常情况，确认将此订单异常挂起, 是否继续?', '提示', {
        title: '异常挂起',
        confirmButtonText: '确定挂起',
        cancelButtonText: '取 消',
        inputType: 'textarea',
        inputPattern: /\S/,
        inputErrorMessage: '请填写挂起原因'
      }).then(({value}) => {
        modifyIsExceptionSuspended(this.truckLoadOrderData.id, 111002001, value)
          .then((res) => {
            if (res.status === 200) {
              this.truckLoadOrderData = res.data;
              this.$message.success('订单挂起成功');
            }
          });
      }).catch(({value}) => {
      });
    }
  },
  mounted () {
  }
};
</script>
